<template>
  <div class="admin-creation-container">
    <h1>新增管理员</h1>
    <el-form :model="form" :rules="rules" ref="formRef" label-width="120px" @submit.prevent="submitForm">
      <el-form-item label="用户名" prop="username">
        <el-input v-model="form.username"></el-input>
      </el-form-item>
      <el-form-item label="密码" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" native-type="submit">创建</el-button>
      </el-form-item>
    </el-form>

    <el-divider />

    <h2>管理员列表</h2>
    <el-table :data="data" v-loading="loading">
      <el-table-column prop="username" label="用户名" />
      <el-table-column label="操作">
        <template #default="{ row }">
          <el-button size="small" @click="handleEdit(row)">编辑</el-button>
          <el-button size="small" type="danger" @click="handleDelete(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="编辑管理员" v-model="editDialogVisible">
      <el-form :model="editingUser" label-width="80px">
        <el-form-item label="用户名">
          <el-input v-model="editingUser.username"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="editDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitEdit">提交</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue';
import request from '@/utils/request';
import { ElMessage, ElMessageBox } from 'element-plus';
import { useCRUD } from '@/composables/useCRUD';

const form = ref({
  username: '',
  password: ''
});

const rules = {
  username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
  password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
};

const { data, loading, fetchData } = useCRUD('/admin/users');

const editDialogVisible = ref(false);
const editingUser = reactive({ reader_id: null, username: '' });

const submitForm = async () => {
  try {
    await request.post('/admin/users', { ...form.value, role: 'admin' });
    ElMessage.success('管理员创建成功');
    form.value.username = '';
    form.value.password = '';
    fetchData(); // Refresh the list
  } catch (error) {
    ElMessage.error('创建失败');
  }
};

const handleEdit = (user) => {
  editingUser.reader_id = user.reader_id;
  editingUser.username = user.username;
  editDialogVisible.value = true;
};

const submitEdit = async () => {
  try {
    await request.put(`/admin/users/${editingUser.reader_id}`, { username: editingUser.username, role: 'admin' });
    ElMessage.success('更新成功');
    editDialogVisible.value = false;
    fetchData();
  } catch (error) {
    ElMessage.error('更新失败');
  }
};

const handleDelete = (user) => {
  ElMessageBox.confirm(`确定要删除管理员 ${user.username} 吗？`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(async () => {
    try {
      await request.delete(`/admin/users/${user.reader_id}`);
      ElMessage.success('删除成功');
      fetchData();
    } catch (error) {
      ElMessage.error('删除失败');
    }
  });
};
</script>

<style scoped>
.admin-creation-container {
  padding: 20px;
  max-width: 800px;
}
</style>